<template>
  <div>
    <div class="center-box">
      <v-puzzle :on-success="test"
                width="260"
                height="120"
                pl-size="30"
                deviation="5"
                :puzzle-img-list="imgList"
                style="width: 90%;">
      </v-puzzle>
    </div>
  </div>
</template>

<script>
  import vPuzzle from '../component/puzzle'
  export default {
    name: 'puzzleUseCase',
    components: {
      vPuzzle
    },
    data () {
      return {
        imgList: [ // 可从配置文件取
          '../../../static/img/ver.png',
          '../../../static/img/ver-1.png',
          // '../../../static/img/ver-2.png',
          // '../../../static/img/ver-3.png'
        ]
      }
    },
    methods: {
      test() {
        alert('用例页的方法回调成功了')
      }
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<style scoped>
  .center-box{
    width: 100%;
    padding: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }
</style>
